import React, { useState, lazy, Suspense } from 'react'
import './App.scss'
const Button = lazy(() => import(/*webpackChunkName:'button'*/ '@/components/Button.jsx'))
const App = () => {
    const [num, setNum] = useState(4)
    const [show, setShow] = useState(false)
    const handleShow = () => {
        setShow(pre => !pre)
    }
    const handleAdd = () => {
        setNum(pre => pre + 1)
    }
    return (
        <>
            <p className="p">Hello,React</p>
            <div className='abc'>
                <div className="box"></div>
                <div className="box1"></div>
                <div className="box2"></div>
                <div className="box3"></div>
                <div className="box4"></div>
                <div className="box5"></div>
                <div className="box6"></div>
                <div className="box7"></div>
                <div className="box8"></div>
            </div>
            <p>{num}</p>
            <button onClick={handleAdd}>+1</button>
            <button onClick={handleShow}>显示Button</button>
            <Suspense>
                {
                    show ? <Button /> : null
                }
            </Suspense>
        </>
    )
}
export default App